<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<script src="js/jquery-1.11.0.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/login.css">
    <title>登录页面</title>
</head>
<body>
    <div style="text-align: center;" id="title">
        <p>火车购票系统 --- 登陆页面</p>
        <p>Welcome</p>
    </div>
    <div>
        <!-- 登录错误信息提示 -->
        <div id="errorMsg" class="alert alert-danger" ></div>
        <!-- 登录表格 -->
        <div id="login">
            <form id="loginForm" action="" method="post" accept-charset="utf-8">
                <table class="table" style="text-align: center;">
                    <tr>
                        <td>账号</td>
                        <td>            
                            <input name="username" type="text" placeholder="请输入账号" autocomplete="off">
                        </td>
                    </tr>
                    <tr>
                        <td>密码</td>
                        <td>
                            <input type="password" name="password" type="text" placeholder="请输入密码" autocomplete="off">
                        </td>
                    </tr>
                    <tr>
                        <td>验证码</td>
                        <td>
                            <input name="check" type="text" placeholder="请输入验证码" autocomplete="off">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div class="verify">
                                <span><img src="checkCode" alt="" onclick="changeCheckCode(this)" ></span>
                                <script type="text/javascript">
                                    //图片点击事件
                                    function changeCheckCode(img) {
                                        img.src="checkCode?"+new Date().getTime();
                                    }
                                </script>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div class="submit_btn">
                                <input type="submit" value="登录"></button>
                            </div>   
                        </td>
                    </tr>
                </table>
                <!-- <input type="hidden" name="action" value="login"/> -->		       		
            </form>
        </div>
        <div id="admitDiv">
            <a href="admitLogin.html">管理员登录页面</a>
        </div>
        <div id="registerDiv">
            没有账号<a href="register.html">点击注册</a>
        </div>
        

    </div>
    <script>
        $("#loginForm").submit(function() {
            $.ajax({
                url:"login",
                type:"post",
                data: $("#loginForm").serialize(), // 调用js的表单序列化方法 , 将表单的内容转换为字符串
                success: function(data) {
                    
                    data = JSON.parse(data);
                    if (data.code == 200) {
                        location.href = "booking.html";
                    }else {
                        $("#errorMsg").html(data.msg);
                    }
                }
            });
            return false;
            
        }) ;
        // $("#registerForm").submit(function() {

        // 	return false ;
        // });            
    </script>
</body>
</html>